<template>
  <div class="room-divider" :title="value ? displayLabel : hiddenLabel">
    <span>{{value?displayLabel:hiddenLabel}}</span>
    <i v-if="value" class="el-icon-caret-bottom"></i>
    <i v-else class="el-icon-caret-top"></i>
  </div>
</template>
<script>
/**
 * 隐藏/显示 开关 vmodel:false==显示 反之隐藏
 */
export default {
  name: "ToggleDivider",
  props:{
     value: {},
     hiddenLabel: {default:""},
     displayLabel: {default:""}
  },
  data() {
    return {
    };
  },
  methods: {
    toggle(){

    }
  }
};
</script>
<style lang="scss">
  .room-divider {
      text-align: center;
      position: relative;
      color: #409EFF;
      clear: both;
      margin-bottom: 15px;
      cursor: pointer;
  }
  .room-divider::before {
    content: '';
    width: 44%;
    height: 2px;
    background: #d4d4d4;
    position: absolute;
    left: 0px;
    top: 50%;
  }
  .room-divider::after {
    content: '';
    width: 44%;
    height: 2px;
    background: #d4d4d4;
    position: absolute;
    right: 0px;
    top: 50%;
  }
</style>
